<template>
    <glsx-dialog :show="value" title="任务分配" width="60%" @close="closeDialog">
        <el-form ref="form" :model="form" :rules="formRules" class="popup_content">
            <div class="allocation_box">
                <div class="head">
                    <el-checkbox class="el_checkbox" v-model="allCheck" @change="onAllCheck"></el-checkbox>
                    <span>分配对象</span>
                </div>
                <el-form-item prop="assignUserIds">
                    <el-checkbox-group class="el_checkbox_group" v-model="form.assignUserIds">
                        <el-checkbox class="el_checkbox" v-for="(item, index) in userList" :key="`user_${index}`"
                            :label="item.userId" :value="item.userId">{{ item.username }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </div>
            <div class="rule_box">
                <div class="title">客户类型</div>
                <div class="radio_list">
                    <el-form-item prop="assignType">
                        <el-radio-group class="el_radio_group" v-model="form.assignType">
                            <el-radio :label="1">待预约客户，优先分配接近到期时间客户</el-radio>
                            <el-radio :label="2">未成交客户，优先分配接近到期时间客户</el-radio>
                            <el-radio :label="3">公海客户，优先分配跟进次数少的客户</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>
                <div class="title">分配数量</div>
                <el-form-item prop="assignAmount">
                    <el-input type="text" v-model.number="form.assignAmount" class="a_input"></el-input>
                </el-form-item>
            </div>
        </el-form>
        <div slot="footer">
            <el-button type="primary" size="small" :loading="bloading" @click="saveInfo()">保存</el-button>
            <el-button type="default" size="small" :loading="bloading" @click="closeDialog()">取消</el-button>
        </div>
    </glsx-dialog>
</template>
<script>
import { GET_ASSIGNUSERS_LIST, SAVE_CUSTOMER_ASSIGN } from "@/http/system";
import {
    GET_ASSIGNMENT_SEARCH,
} from "@/http/clues";
import { deepClone, showToast } from "@/common/util";
export default {
    name: "TaskAllocation",
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            form: { assignUserIds: [] },
            loading: false,
            userList: [],
            formRules: {
                assignUserIds: [
                    { required: true, message: '请选择分配对象', trigger: 'change' }
                ],
                assignType: [
                    { required: true, message: '请选择客户类型', trigger: 'change' }
                ],
                assignAmount: [
                    { required: true, message: '请输入分配数量', trigger: 'blur' }
                ]
            },
            bloading: false,
            allCheck: false
        };
    },
    created() {
        this.getList()
    },
    mounted() {
    },
    methods: {

        // 保存数据
        saveInfo(type) {
            let _this = this;

            _this.$refs.form.validate((valid) => {
                if (!valid) {
                    return false;
                }
                let params = deepClone(_this.form);
                console.log(params)
                SAVE_CUSTOMER_ASSIGN(params).then(res => {
                    if (res.code == 200) {
                        showToast({
                            message: '操作成功',
                            type: 'success'
                        })
                        _this.closeDialog()
                        _this.$emit('change')
                    }
                })

            });
        },

        // 监听状态切换
        onChange() {
            this.$refs.addForm.clearValidate();
            this.randomKey = Math.random();
        },

        // 关闭弹框
        closeDialog() {
            this.$emit('input', false)
        },

        // 获取分配对象
        getList() {
            let params = {}
            params.pageNumber = 1;
            params.pageSize = 1000;
            GET_ASSIGNMENT_SEARCH(params).then(res => {
                console.log(res)
                let _obj = res.data || {}
                this.userList = _obj.list || []
            })
        },

        // 监听全选
        onAllCheck(e) {
            let list = this.userList || []
            let o = deepClone(this.form)
            let n = o.assignUserIds || []
            let m = []
            if (e) {
                list.map(k => {
                    m.push(k.userId)
                })
            }else{
                m = []
            }
            this.$set(this.form, 'assignUserIds', m)
        }

    },
};
</script>
<style lang="scss" scoped>
.popup_content {
    display: flex;

    .rule_box {
        flex: 1;
        margin-left: 20px;
    }

    .title {
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: bold;
    }
}

.allocation_box {
    flex-shrink: 0;
    width: 200px;
    background: #f2f2f2;
    border-radius: 4px;
    padding: 10px;

    .head {
        border-bottom: 1px solid #d8d8d8;
        margin: 0 -10px;
        padding: 0 10px 10px 10px;
        font-weight: bold;
        span{
            margin-left:10px;
        }
    }
}

.el_checkbox_group {
    display: flex;
    flex-direction: column;
    height: 300px;
    overflow-y: auto;
}

.el_radio_group {
    display: flex;
    flex-direction: column;

    .el-radio {
        margin: 10px 0;
    }
}

.a_input {
    width: 300px;
}
</style>